<template>
  <div>
    <input type="text">
    <button @click="changeCounter" v-wmy>{{counter}}</button>
  </div>
</template>

<script>
import {ref} from "vue";

export default {
  // 获取焦点
  // 自定义局部指令
  directives:{
    wmy:{
      created(){
        console.log("wmy created");
      },

      beforeMount(){
        console.log("wmy beforeMount");
      },

      mounted(){
        console.log("wmy mounted");
      },

      beforeUpdate(){
        console.log("wmy beforeUpdate");
      },

      updated(){
        console.log("wmy updated");
      },

      beforeUnmount(){
        console.log("wmy beforeUnmount");
      },

      unmount(){
        console.log("wmy unmount");
      }
    }
  },
  setup(){
    const counter = ref(0);

    const changeCounter = () => counter.value++;

    return{
      counter,changeCounter
    }

  }
}
</script>

<style scoped>

</style>